<template>
  <div>
    <div class="from-row">
      <div class="form-group col-md-12 mt-3">
        <label for="inputPassword4">用户名</label>
        <input v-model="username" type="text" class="form-control f-bg"  placeholder="请输入用户名">
      </div>
      <div class="form-group col-md-12 mt-3">
        <label for="inputPassword4">密码</label>
        <input v-model="password" type="password" class="form-control f-bg" id="inputPassword4" placeholder="请输入密码">
      </div>
      <div class="form-group col-md-12 mt-3">
        <label for="inputPassword4">邮箱</label>
        <input v-model="email" type="text" class="form-control f-bg" id="inputPassword4" placeholder="请输入邮箱">
      </div>
    </div>
    <div class="row mt-4">
      <div class="col col-11 ml-3">
        <button type="button" class="btn btn-outline-primary btn-block" @click="handRegister">注册</button>
      </div>
    </div>
    <div class="modal fade" 
    :class="[{in:active},{show:active},{hiden:!active}]"
    id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">注册成功!</div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
  </div>
</template>

<script>
import {getLogin,register} from '@/api/user'
import {setCookie,getCookie} from '@/until/cookie' //cookie的 引入
export default {
  name:'Register',
  data(){
    return{
      username:'',
      password:'',
      email:'',
      active:false
    }
  },
  methods:{
    handRegister(){
      register({username:this.username, password:this.password})
      .then(res=>{
        res = res.data  //  请求成功拿到数据，第一层有一个axios 默认封装的 data
        if(!res.nonBizError){   //  nonBizError，message 是服务器返回
          alert(res.message)  //用户存在时就弹出message    message是指该账号名已经存在
          return
        }
        let userinfo = res.data.data
        setCookie('username',userinfo.username, 1000*30*1000)
        setCookie('password',userinfo.password, 1000*30*1000)
        this.active = true
      })
      this.$router.push('/home')
    }
  }
}
</script>

<style scoped>
.show{
  display: block;
}
.hiden{
  display: none;
}
  .f-bg{ 
  background-color:rgba(0, 0, 0,.0);
  border:1px solid rgba(0, 0, 0,.2);
}
.tyb:hover{
  cursor: pointer;
}
</style>